<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane v-if="false" label="修改密码" name="1">
        <MyPassword />
      </el-tab-pane>
      <el-tab-pane label="基础设置" name="1">
        <el-form ref="form" :model="form" :rules="formRules">
          <el-form-item label="头像" prop="avatar">
            <UploadAvatar v-model="form.avatar" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSave">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { updateMe } from '../../api/user'

export default {
  components: {
    MyPassword: () => import('./components/password'),
    UploadAvatar: () => import('../employee/SxUpload')
  },
  data() {
    return {
      activeName: '1',
      form: {
        avatar: ''
      },
      formRules: {
        'avatar': [
          { 'required': true, message: '必须上传头像' }
        ]
      }
    }
  },
  mounted() {
    this.$store.dispatch('user/getInfo').then((data) => {
      this.form.avatar = data.avatar
    })
  },
  methods: {
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          updateMe(this.form).then(() => {
            this.$message.success('头像上传成功')
            this.$store.dispatch('user/getInfo')
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
